<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Movie Directory</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script type="text/javascript" src="/hhac/prototype.js"></script>
  <link type="text/css" href="hhac.css" rel="stylesheet"/>
<script type="text/javascript">
load_mvlist = new Ajax.Request('/hhac/cgi/movies',
  {
    method: 'GET',
    onSuccess: function(transport) {
      var response = transport.responseText;
      movies = response.evalJSON();
      movie_count = movies.size();

      table = document.createElement("table");
      table.setAttribute("id", "mvlist");
      table.setAttribute("border", "1");
      table.setAttribute("width", "100%");

      for(var i = 0; i < movie_count; i++)
      {
        umovie =  movies[i];
        movie_id = umovie.id;
        movie_title = umovie.title;
        movie_tags = umovie.tags;
        movie_description = umovie.description;
        movie_user = umovie.user;

        a = document.createElement("a");
        a.setAttribute("target", "viewer");
        a.setAttribute("href", "/hhac/play.php?id="+movie_id);
        a.setAttribute("style", "font-weight:bold");
        a.appendChild(document.createTextNode(movie_title));

        info_user = " by "+movie_user;
        info_tags = "Tags: "+movie_tags;
        info_description = "Description: "+movie_description;

        td = document.createElement("td");
        
        //background = i % 2 ? "#cceecc" : "#ccddcc";
        cls = ['even','odd'];
        td.setAttribute("class", cls[i%2]);
        
        //td.setAttribute("style", "background:"+background);
        td.appendChild(a);
        td.appendChild(document.createTextNode(info_user));
        td.appendChild(document.createElement("br"));
        td.appendChild(document.createTextNode(info_tags));
        td.appendChild(document.createElement("br"));
        td.appendChild(document.createTextNode(info_description));

        tr = document.createElement("tr");
        tr.appendChild(td);
        table.appendChild(tr);
      }

      $("div_mvlist").removeChild($("div_mvlist").firstChild);
      $("div_mvlist").appendChild(table);
    },
    onFailure: function()
    {
      $("div_mvlist").firstChild.data = "Something went wrong...";
    }
  }
); // end function `load_vlist`
</script>

  <style type="text/css">
/*
page
  header
  content
    nav
    main
      left
      right
  footer
*/
#page {
background: #eeeeee none repeat scroll 0 0;
margin: 0 auto;
padding: 0;
width: 960px;
}
#header {
position: relative;
background-color: #cccccc;
margin: 0;
padding: 0;
text-align: center;
}
#content {
position: relative;
//margin: 0 auto 10px;
padding: 0;
width: 100%;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #bbbbff;
}
#nav ul {
margin: 0;
padding: 0;
width: 100%;
}
#nav li {
font-weight: bold;
display: inline;
float: left;
line-height: 2em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0 10px;
}
#nav li :hover {
position: relative;
background-color: #66bb66;
}
#main {
position: relative;
background-color: #ffffcc;
}
#left {
display: inline;
float: left;
margin-top: 50px;
overflow: hidden;
width: 55%;
//background-color: #cceecc;
}
#right {
display: inline;
float: right;
margin-top: 50px;
padding-top: 50px;
padding-bottom: 50px;
width: 44%;
background-color: #ccddcc;
}
#footer {
position: relative;
left: 0;
top: 20px;
padding: 10px;
background-color: #cccccc;
text-align: left;
clear: both;
}
  </style>
</head>

<body>
  <div id="page">
    <div id="header">
      <h1>Home of Harmless Amination & Comic</h1>
    </div>

    <div id="content">
      <div id="nav">
        <ul>
          <li><a href="/hhac/login.php">Login</a></li>
          <li><a href="/hhac/register.php">Register</a></li>
        </ul>
      </div>
      <div id="main">
        <div id="left">
          <p><span style="font-weight:bold">Available Movie List</span></p>
          <div id="div_mvlist">
            Loading movie list (Ajax)...
          </div>
        </div>
        <div id="right">
            <p>This is right part of div `main`</p>
        </div>
      </div>
    </div>

    <div id="footer">
            <p>This is footer</p>
      <!--
      <img src="/hhac/fox1.jpg" width="48%"/>
      <img src="/hhac/fox2.jpg" width="48%"/>
      -->
    </div>
  </div>
</body>
</html>
